<template>
  <myMenu></myMenu>

  <a-form :model="form" :rules="rules">
    <a-row>
      <a-col :span="8">
        <a-form-item label="姓名" name="name">
          <a-input v-model:value="form.name" />
        </a-form-item>

        <a-form-item label="身份证号" name="idcard">
          <a-input v-model:value="form.idcard" />
        </a-form-item>

        <a-form-item label="民族" name="nation">
          <a-select v-model:value="form.nation">
            <a-select-option
              v-for="item of nationOptions"
              :key="item.value"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </a-form-item>

        <a-form-item label="性别" name="sex">
          <a-radio-group
            :options="[
              { label: '男', value: '1' },
              { label: '女', value: '2' },
            ]"
            v-model:value="form.sex"
          />
        </a-form-item>

        <a-form-item label="电话" name="phone">
          <a-input v-model:value="form.phone" />
        </a-form-item>

        <a-form-item label="出生日期" name="birth">
          <a-date-picker v-model:value="form.birth" />
        </a-form-item>

        <a-form-item label="文化程度" name="education">
          <a-select v-model:value="form.education">
            <a-select-option
              v-for="item of educationOptions"
              :key="item.value"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </a-form-item>

        <a-form-item label="联系地址" name="addr">
          <a-input v-model:value="form.addr" />
        </a-form-item>

        <a-form-item label="准考证头像" name="icon">
          <myUpload v-model:value="form.icon"></myUpload>
        </a-form-item>
      </a-col>

      <a-col :span="8"> </a-col>

      <a-col :span="8"> </a-col>
    </a-row>
    <a-button type="primary" @click="onSubmit">修改信息</a-button>
  </a-form>

</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import {
  formData,
  formRules,
  politicalOptions,
  nationOptions,
  educationOptions,
  degreeOptions,
} from "@utils/constant.js";
export default {
  setup() {
    const state = reactive({
      form: formData,
      rules: formRules,
    });

    const onSubmit = ()=>{
      console.log(state.form)
    }

    return {
      ...toRefs(state),
      politicalOptions,
      nationOptions,
      educationOptions,
      degreeOptions,
      onSubmit
    };
  },
};
</script>

<style>
</style>